<script setup>

import {Delete, View} from "@element-plus/icons-vue";
import {getCurrentInstance, ref} from "vue";
import {get, post} from "@/net";
import {useStore} from "@/stores/userStore";
import {ElMessage} from "element-plus";

const drawer = ref(false)
const { proxy } = getCurrentInstance();

const article = ref([])
const comment = ref([])
const commentForm = ref([])

const getData = () => {
    get('api/article/aid?aid=' + proxy.$route.query.aid,
            (data) => {
                addViews()
                article.value = data
                getTypename(article.value.tid)
                getAuthor(1, 0, article.value.uid)
                getComment()
            })
}

const getTypename = (tid) => {
    get('api/type/tid?tid=' + tid, (data) => {
        article.value.type = data.type
    })
}

const getAuthor = (tag, i, uid) => {
    get('api/user/uid?uid=' + uid, (data) => {
        if (tag === 1) {
            article.value.author = data.username
        } else {
            comment.value[i].username = data.username
        }

    })
}

const addViews = () => {
    post('api/article/update-view', {
        aid: proxy.$route.query.aid
    }, (message) => {
        console.log(message)
    })
}

const getComment = () => {
    get('api/comment/aid?aid=' + proxy.$route.query.aid,
     (data) => {
         comment.value = data
         comment.value.forEach((item, i)=> {
              getAuthor(2, i, item.uid)
         })
    })
}

const addComment = () => {
     post('api/comment/add', {
         aid: proxy.$route.query.aid,
         uid: useStore().auth.user.uid,
         content: commentForm.value
     }, (message) => {
         ElMessage.success(message)
         commentForm.value = null
         getComment()
     })
}

const deleteComment = (cid) => {
     post('api/comment/delete', {
         cid: cid
     }, (message) => {
         ElMessage.success(message)
         getComment()
     })
}

getData()
</script>

<template>
    <div class="article">
        <div class="article-top">
            <div class="title" v-html="article.title">
            </div>
            <div class="info">
                <label style="margin-left: 20px">作者: </label><span v-html="article.author"></span>
                <label style="margin-left: 14px">发布日期: </label><span v-html="article.publish_time"></span>
                <label style="margin-left: 14px">文章分类: </label><span v-html="article.type"></span>
                <el-icon :size="20" style="margin-left: 14px;transform: translateY(4px)">
                    <View/>
                </el-icon>
                <span>浏览量{{article.views}}</span>
            </div>
        </div>
        <div class="article-content">
            <div style="margin: 20px 20px">
                <p v-html="article.content"></p>
            </div>
        </div>
        <div>
            <el-affix position="bottom" :offset="20" style="transform: translateX(100%)">
                <el-button color="orange" @click="drawer = true">评论</el-button>
            </el-affix>
        </div>
        <el-drawer
                v-model="drawer"
                direction="rtl"
                size="30%"
        >
            <template #header>
                <h4>评论</h4>
            </template>
            <template #default>
                <el-scrollbar>
                    <div v-for="c in comment" class="comment-item">
                        <div class="userinfo">
                            <span>{{ c.username }}</span>
                            <span style="margin-left: 20px">{{ c.publish_time }}</span>
                            <el-icon v-if="c.uid === useStore().auth.user.uid" class="delete" @click="deleteComment(c.cid)">
                                <Delete/>
                            </el-icon>
                        </div>
                        <div class="comment">
                            {{ c.content }}
                        </div>
                    </div>
                </el-scrollbar>
            </template>
            <template #footer>
                <el-form>
                    <el-form-item>
                        <el-input
                                placeholder="请输入评论"
                                v-model="commentForm"
                                show-word-limit
                                maxlength="200"
                                type="textarea"
                                rows="5"
                                resize='none'
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button color="orange" @click="addComment" round>评论</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-drawer>
    </div>
</template>

<style scoped>
.article {
    width: 1014px;
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    gap: 14px;
}

.article-top {
    width: 1014px;
    height: 90px;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.7)
}

.title {
    font-size: 24px;
    font-weight: 500;
    margin: 10px 20px;
}

.info {
    color: #999;
}

.article-content {
    width: 1014px;
    background-color: rgba(255, 255, 255, 0.7)
}

.comment-item {
    margin: 0 0 20px 10px;
}

.userinfo {
    color: #999;
    margin-bottom: 5px;
}

.delete {
    cursor: pointer;
    position: absolute;
    right: 20px;
    transform: translateY(4px);
}

.delete:hover {
    color: red;
}

</style>